<template>
    <div :class="computedClasses" class="numberEL clipped-corner">
      <div class="clipped-corner2"></div>
      <span v-for="digit in digits" :key="digit" class="numberEd">{{ digit }}</span>
    </div>
</template>
  
  <script setup>
  import { defineProps, computed } from 'vue';

  const props = defineProps({
    number: {
      type: Number,
      required: true
    },
    cornerClasses:{
      type:Array,
      default: () => [false, false, false, false],
      validator(value) {
        return value.length === 4 && value.every(val => typeof val === 'boolean');
      }
    }
  });

const digits = props.number.toString().split('').map(Number);

const computedClasses = computed(() => {
      const classes = [];
      if (props.cornerClasses[0]) classes.push('leftBottom');
      if (props.cornerClasses[1]) classes.push('rightTop');
      if (props.cornerClasses[2]) classes.push('rightBottom');
      if (props.cornerClasses[3]) classes.push('leftTop');
      return classes;
    });

function updateClipPath() {
			const elements = document.querySelectorAll('.clipped-corner');
			// 斜角大小
			let borderWidth = '0.1'
			elements.forEach(element => {
				// const width = parseFloat(getComputedStyle(element).getPropertyValue('--width'));
				// const height = parseFloat(getComputedStyle(element).getPropertyValue('--height'));
				const width = element.offsetWidth
				const height = element.offsetHeight

				const widthRatio = height / width;

				// 示例：假设直角三角形的长为3，宽为4  
				var lengthx = borderWidth * width;
				// 计算斜边长  
				var hypotenuse = calculateHypotenuse(lengthx, lengthx);

				element.style.setProperty('--width-ratio', widthRatio);
				element.style.setProperty('--border-color', getComputedStyle(element).getPropertyValue('border-color'));
				element.style.setProperty('--width-length', lengthx + 'px');
				element.style.setProperty('--width-bian', hypotenuse +'px');
			});
		}

		document.addEventListener('DOMContentLoaded', updateClipPath);
		window.addEventListener('resize', updateClipPath);


		function calculateHypotenuse(a, b) {
			// 使用勾股定理计算斜边长  
			return Math.sqrt(a * a + b * b);
		}


  </script>

<style>
		*{
			box-sizing: border-box;
		}
		:root {
			--top-left-radius: 0%;
			--top-right-radius: 0%;
			--bottom-left-radius: 0%;
			--bottom-right-radius: 0%;
			/* --width: 200px; */
			/* --height: 100px; */
			--border-color:#395ab9;
			--background-color:#15285b;
		}

		.style1 {
			--border-color:#962c34;
			--background-color:#603031;
		}
		.style2 {
			--border-color:#af5e00;
			--background-color:#5a2e1a;
		}

		.clipped-corner2 {
			width: var(--width);
			height: var(--height);
		}

		.clipped-corner {
			position: relative;
			background-color: var(--background-color);
			border: 2px solid var(--border-color);
			/* border-radius: 10px; */
			/* 可根据需要调整 */
			/* 使用 clip-path 创建切角效果 */
			clip-path: polygon(
					var(--top-left-radius) 0%, /* 左上角 */
					calc(100% - var(--top-right-radius)) 0%, /* 右上角 */
					100% calc(var(--top-right-radius) / var(--width-ratio)), /* 右上角 */
					100% calc(100% - var(--bottom-right-radius) / var(--width-ratio)), /* 右下角 */
					calc(100% - var(--bottom-right-radius)) 100%, /* 右下角 */
					var(--bottom-left-radius) 100%, /* 左下角 */
					0% calc(100% - var(--bottom-left-radius) / var(--width-ratio)), /* 左下角 */
					0% calc(var(--top-left-radius) / var(--width-ratio)) /* 左上角 */
				);
		}

		/* 左上角斜线 */
		.leftTop .clipped-corner2::before {
			content: '';
			position: absolute;
			top:0;
			left: calc(var(--width-length) - 3px - 1px);
			width: 3px;
			height: var(--width-bian);
			background-color: var(--border-color);
			transform: skewX(-45deg);
			transform-origin: top left;
			z-index: 1;
		}

		/* 右上角斜线 */
		.rightTop .clipped-corner2::after {
			content: '';
			position: absolute;
			top: 0;
			right: calc(var(--width-length) - 3px - 1px);
			width: 3px;
			height: var(--width-bian);
			background-color: var(--border-color);
			transform: skewX(45deg);
			transform-origin: top right;
			z-index: 1;
		}

		/* 左下角斜线 */
		.clipped-corner.leftBottom::before {
			content: '';
			position: absolute;
			bottom: 0px;
			left: calc(var(--width-length) - 3px - 1px);
			width: 3px;
			height: var(--width-bian);
			background-color: var(--border-color);
			transform: skewX(45deg);
			transform-origin: bottom left;
			z-index: 1;
		}


		/* 右下角斜线 */
		.clipped-corner.rightBottom::after {
			content: '';
			position: absolute;
			bottom: 0px;
			right: calc(var(--width-length) - 3px - 1px);
			width: 3px;
			height: var(--width-bian);
			background-color: var(--border-color);
			transform: skewX(-45deg);
			transform-origin: bottom right;
			z-index: 1;
		}
		.leftTop {
			--top-left-radius: 10%;
		}
		.rightTop {
			--top-right-radius: 10%;
		}
		.leftBottom {
			--bottom-left-radius: 10%;
		}
		.rightBottom {
			--bottom-right-radius: 10%;
		}
	</style>
  
<style lang="stylus" scoped>
</style>
  <style scoped>
  
  .numberEd:not(:last-child)::after {
    content:'';
    display: inline-block;
    position: absolute;
    top: 5px;
    right: -2px;
    width: 1px;
    height: 24px;
    background-color: rgba(46,78,171,.4);
  }
  .numberEd {
    position: relative;
    margin: 2px;
    padding:0 0 0 5px;
  }
 
  </style>
  